<template>
	<!--企业数据交易账户-->
	<view class="padding-bottom-lg">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">企业数据交易账户</view>
			</block>
		</cu-custom>
		<view class="progress1 padding-top-32">
			<view class="progress-circle-1">
				<view class="complate-content">
					<image src="https://txr001.zthj.net/static/img/complate.png" class="img-40"></image>
				</view>
				<text class="progress-text">基本信息</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<view class="complate-content">
					<image src="https://txr001.zthj.net/static/img/complate.png" class="img-40"></image>
				</view>
				<text class="progress-text">申请代表</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<view class="complate-content">
					<view class="uncomplate-content"></view>
				</view>
				<text class="progress-text">确认代表</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<text class="progress-circle-number">4</text>
				<text class="progress-text">附件上传</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<text class="progress-circle-number">5</text>
				<text class="progress-text">附件寄送</text>
			</view>
		</view>
		<view class="margin-32 padding-32 bg-white radius-48">
			<view class="basic-qy-name">姓名：</view>
			<input class="basic-qy-input" v-model="form.qr_name" placeholder="请输入姓名" name="input"></input>

			<view class="basic-qy-name padding-top-48">身份证明类型：</view>
			<radio-group class="block " @change="idchange">
				<view class="padding-top-lg padding-bottom">
					<view class="flex align-start">
						<view class="flex-sub flex align-center justify-start">
							<radio value="1" :checked="form.qrid_type==1" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two">身份证</text>
						</view>
						<view class="flex-sub flex align-start justify-start">
							<radio value="2" :checked="form.qrid_type==2" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two margin-top-6">港澳居民来往内地通行证</text>
						</view>
					</view>
					<view class="flex padding-top-40">
						<view class="flex-sub flex align-start justify-start">
							<radio value="3" :checked="form.qrid_type==3" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two margin-top-6">台湾居民来往大陆通行证</text>
						</view>
						<view class="flex-sub flex align-start justify-start">
							<radio value="4" :checked="form.qrid_type==4" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two margin-top-6">护照或外国人永久居留证</text>
						</view>
					</view>
				</view>
			</radio-group>

			<view class="basic-qy-name padding-top-48">证件号码：</view>
			<input class="basic-qy-input" v-model="form.qr_idcard" placeholder="请输入证件号码" name="input"></input>

			<view class="basic-qy-name padding-top-48">手机：</view>
			<input class="basic-qy-input" v-model="form.qr_mobile" placeholder="请输入手机号" name="input"></input>

			<view class="basic-qy-name padding-top-48">电子邮件：</view>
			<input class="basic-qy-input" v-model="form.qr_email" placeholder="请输入电子邮件" name="input"></input>


			<view class="padding flex flex-wrap justify-center align-center">
				<button class="cu-btn round submit-btn" @click="toNext">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					id: 0,
					qr_name: '',
					qrid_type: 1,
					qr_idcard: '',
					qr_mobile: '',
					qr_email: ''
				}
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			async toNext() {
				if (!this.form.qr_name) {
					uni.showToast({
						title: '请输入确认代表姓名',
						icon: 'none'
					})
					return
				}
				if (!this.form.qr_idcard) {
					uni.showToast({
						title: '请输入确认代表证件号码',
						icon: 'none'
					})
					return
				}

				let mobilereg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (!this.form.qr_mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!mobilereg.test(this.form.qr_mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				let email_reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				if (!this.form.qr_email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					})
					return
				} else if (!email_reg.test(this.form.qr_email)) {
					uni.showToast({
						title: '请输入正确的邮箱',
						icon: 'none'
					})
					return
				}
				let res = await this.$api.updateJiaoyi(this.form);
				if (res.code == 1) {
					this.form.id = res.data.renzheng_id;
					uni.navigateTo({
						url: "/subpackage/pages/mine/company/trafficAccountFour?id=" + this.form.id
					})
				} else {
					uni.showToast({
						title: '提交失败！',
						icon: 'none'
					})
				}
			},
			idchange(e) {
				this.form.qrid_type = e.detail.value;
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			getInfo: async function(id) {
				let res = await this.$api.jiaoyiInfo();
				this.form.qr_name = res.qr_name ? res.qr_name : '';
				this.form.qrid_type = res.qrid_type ? res.qrid_type : 1;
				this.form.qr_idcard = res.qr_idcard ? res.qr_idcard : '';
				this.form.qr_mobile = res.qr_mobile ? res.qr_mobile : '';
				this.form.qr_email = res.qr_email ? res.qr_email : '';
				this.form.id = res.id;
			}
		}
	}
</script>
<style scoped>
	.progress1 .progress-line1 {
		width: 72rpx;
	}
	input{
		color: black;
	}
</style>